<template>
  <!-- ICF管理 -->
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <!-- 条件查询 start -->
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="申请状态">
              <a-select v-model="queryParam.status" placeholder="请选择申请状态" default-value="">
                <a-select-option v-for="item in signatureStatus" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="项目">
              <a-select v-model="queryParam.site" placeholder="请选择项目" default-value="">
                <a-select-option v-for="item in siteList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <template v-if="advanced">
            <a-col :md="8" :sm="24">
              <a-form-item label="受试者ID">
                <a-input v-model="queryParam.id" placeholder="请输入受试者ID"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="申请日期">
                <a-range-picker @change="handleApplyDate" v-model="queryParam.applyDate" />
              </a-form-item>
            </a-col>
          </template>
          <a-col :md="!advanced && 8 || 24" :sm="24">
            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
              <a @click="toggleAdvanced" style="margin-left: 8px">
                {{ advanced ? '收起' : '展开' }}
                <a-icon :type="advanced ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
        <div class="table-operator">
          <a-button type="primary" icon="plus" @click="handleAdd">新增签署</a-button>
        </div>
      </a-form>
      <!-- 条件查询 end -->
      <!-- 列表展示 start -->
      <a-table
        ref="table"
        size="default"
        :row-key="record => record.id"
        :data-source="dataTable"
      >
        <a-table-column title="序号" key="id" data-index="id" />
        <a-table-column title="site" key="roleId" data-index="roleId" />
        <a-table-column title="受试者ID" key="phone" data-index="phone" />
        <a-table-column title="签署文件" key="name" data-index="name" />
        <a-table-column title="发起人" key="account" data-index="account" />
        <a-table-column title="申请时间" key="createTime" data-index="createTime">
          <template slot-scope="text, record">
            {{ record.createTime | moment() }}
          </template>
        </a-table-column>
        <a-table-column title="当前状态" key="status" data-index="status">
          <template slot-scope="text, record">
            <!-- {{ record.type | enumValueByKey($const.FILE_TYPE) }} -->
            {{ record.status }}
          </template>
        </a-table-column>
        <a-table-column title="操作">
          <template slot-scope="record">
            <!-- <router-link :to="{ name: 'productionOrderExamineDetail', query: record }">
              查看
            </router-link> -->
            <span>
              <a @click="handleView(record)">查看</a>
              <a-divider type="vertical" />
              <a-popconfirm title="是否要删除此行？" @confirm="handleDelete(record)">
                <a>删除</a>
              </a-popconfirm>
              <a-divider type="vertical" v-if="record.isReservation" />
              <a @click="handleVideoReservation(record)" v-if="record.isReservation">视频预约</a>
            </span>
          </template>
        </a-table-column>
      </a-table>
      <!-- 列表展示 end -->
      <!-- 视频预约弹框 start -->
      <a-modal title="预约时间" :visible="modalVisible" @ok="handleOk" @cancel="handleCancel">
        <a-form-model layout="inline" :rules="formRules" :model="formModel" ref="formModelRef">
          <a-row :gutter="48">
            <a-col :md="24" :sm="24">
              <a-form-model-item label="选择时间" prop="reservationDate">
                <a-date-picker v-model="formModel.reservationDate" @change="handleReservationDate" style="width: 200px" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="48">
            <a-col :md="24" :sm="24">
              <a-form-model-item label="参会人员" prop="participants">
                <a-select
                  mode="multiple"
                  :style="{'width': '200px'}"
                  placeholder="请选择"
                  @change="handleParticipants"
                  v-model="formModel.participants"
                >
                  <a-select-option v-for="item in participantsList" :key="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-modal>
      <!-- 视频预约弹框 end -->
    </div>
  </a-card>
</template>

<script>
// import { getUserList } from '@/api/account/user'
export default {
  data () {
    return {
      queryParam: {},
      advanced: false, // 折叠选项卡
      modalVisible: false, // 对话框的显示与否
      formModel: {}, // 对话框选择的数据
      formRules: {
        reservationDate: [{ required: true, message: '请选择时间', trigger: 'change' }],
        participants: [{ required: true, message: '请选择与会人员', trigger: 'change' }]
      },
      temporaryRow: null, // 将点击视频预约的当前行进行暂存
      participantsList: [ // 参会人员下拉列表
        {
          id: 1,
          name: '科比'
        },
        {
          id: 2,
          name: '杜兰特'
        },
        {
          id: 3,
          name: '罗斯'
        }
      ],
      signatureStatus: [],
      siteList: [],
      // loadData: parameter => {
      //   return getUserList(Object.assign(parameter, this.queryParam))
      //     .then(res => {
      //       console.log(res, '获取的签署文件列表信息')
      //       return res
      //     })
      //     .catch(() => {})
      // },
      dataTable: [
        {
          id: 1,
          name: 'aaa',
          isReservation: 1
        },
        {
          id: 2,
          name: 'bbb',
          isReservation: 0
        }
      ]
    }
  },
  created () {
  },
  methods: {
    // 点击展开按钮展示/折叠查询条件
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    // 处理发起日期选择框改变时产生的回调
    handleApplyDate (date, dateString) {
      console.log(date, '****date 时间范围选择框发生了改变**')
      console.log(dateString, '****dateString 时间范围选择框发生了改变**')
      // this.queryParam.applyDate = dateString // 此行代码会发生警告 但可直接获取queryParam需要的参数
      console.log(this.queryParam.applyDate, '打印queryParam.applyDate')
    },
    // 点击新增签署按钮
      handleAdd () {
        this.$router.push({ name: 'ICFManagementAdd' })
      },
    // 点击查看按钮进入详情页面
    handleView (record) {
      // requestDetail({
      //   id: record.id
      // }).then(res => {
      //   console.log(res)
      // })
      this.$router.push({ name: 'ICFManagementDetail', query: record })
      console.log('点击进入详情页')
    },
    // 点击删除按钮删除当前行
    handleDelete (record) {
      // requestDeleteUser({
      //   id: record.id
      // }).then(res => {
      //   this.$message.success('删除成功！')
      //   this.$refs.table.refresh(true)
      // }).catch(_ => {

      // })
      console.log('点击确认了删除操作')
    },
    // 点击视频预约
    handleVideoReservation (record) {
      this.modalVisible = true
      this.temporaryRow = record
      console.log(record, '当前行进行视频预约')
    },
    // 视频预约选择时间改变
    handleReservationDate (date, dateString) {
      // this.formModel.reservationDate = date
      this.formModel.reservationDate = dateString
      console.log(this.formModel.reservationDate, '时间下拉改变')
    },
    // 视频预约参会人员下拉改变
    handleParticipants (value) {
      this.formModel.participants = value
      console.log(this.formModel.participants, '与会人员下拉改变')
    },
    // 点击确定关闭对话框
    handleOk () {
      this.$refs.formModelRef.validate((valid) => {
        if (valid) {
          this.modalVisible = false
          this.formModel.isReservation = 0
          this.temporaryRow = Object.assign({ ...this.formModel }, this.temporaryRow)
          console.log(this.temporaryRow, '视频预约的当前行')
          // 下面的代码写发起请求并刷新表格
          // updateUserList () {
          // getUserList(this.temporaryRow)
          //   .then(res => {
          //     this.formModel = {}
          //     this.temporaryRow = {}
          //     this.$refs.table.refresh(true)
          //   })
          //   .catch()
        } else {
          this.$message.error('请填写完整信息')
        }
      })
    },
    // 点击取消关闭对话框
    handleCancel () {
      this.formModel = {}
      this.modalVisible = false
    }
  }
}
</script>

<style scoped></style>
